
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>登录</title>
    <link rel="stylesheet" href="css/window.css">
</head>
<body>

<span class="close-btn" onclick="closeWindow()">&times;</span>
<main class="container">

    <div class="container-left">
        <div class="logo-container">
            <div class="header-container">
                <p><font size="8" color="white">工&nbsp;程&nbsp;软&nbsp;件&nbsp;研&nbsp;发&nbsp;中&nbsp;心</font></p>
            </div>
        </div>
        <div class="Qr-code-container">
            <img src="imgs/index/1.png" class="Qr-code">
        </div>
    </div>

    <!-- 表单 -->
    <div class="container-right">
        <form class="form" action="" method="post">
            <!-- 表单背景图 -->
            <div class="form__image"></div>
            <!-- 表单Logo -->
            <div class="form__logo" xmlns="http://www.w3.org/2000/svg" width="3044" height="840" viewBox="416.5 656.5 3044 840">
                ESDC
            </div>

            <!-- 用户名 -- -->
            <div class="input">
                <input id="username" type="text" class="input__element" placeholder=" "/>
                <label class="input__label" for="username">用户名</label>
            </div>

            <!-- 验证码 -- -->
            <div class="input">
                <input id="userCaptcha" type="text" class="input__element" placeholder=" "/>
                <label class="input__label" for="userCaptcha">验证码</label>
            </div>

            <!-- 验证码图片 -- -->
            <div class="input">
                <div class="captcha">
                    <img style="float: right;" id="checkCodeImage" src="http://localhost:8080/javaweb_project/checkCodeServlet">
                    <button type="button" id="changeImg" onclick="refreshCaptcha()">看不清？</button>
                </div>
            </div>

            <!-- 密码 -- -->
            <div class="input">
                <input id="password" type="password" class="input__element" placeholder=" "/>
                <label class="input__label" for="password">密码</label>
            </div>

            <button type="button" class="button">
                <div class="button__label" onclick="submitLogin()">登录</div>
                <div type="submit" class="button__icon"></div>
            </button>

            <div class="special-word" style="text-align: right;">
                <a href="javascript:void(0);" onclick="switchToPassword()">忘记密码</a> | <a href="javascript:void(0);" onclick="switchToRegistration()">注册账号</a>
            </div>
        </form>
    </div>
</main>
<script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
<script src="js/window.js"></script>

<script>
    document.addEventListener('DOMContentLoaded', function() {
        const form = document.querySelector('.form');
        form.classList.add('show');
    });
</script>
<script>
    function submitLogin() {
        const username = document.getElementById('username').value;
        const password = document.getElementById('password').value;
        const userCaptcha = document.getElementById('userCaptcha').value;

        // 构造请求数据
        const requestData = `username=${encodeURIComponent(username)}&password=${encodeURIComponent(password)}&userCaptcha=${encodeURIComponent(userCaptcha)}`;

        axios({
            method: "post",
            url: "http://localhost:8080/javaweb_project/user/login",
            headers: {
                "Content-Type": "application/x-www-form-urlencoded"
            },
            data: requestData
        }).then(function (response) {
            // 处理响应
            console.log(response.data);
            if (response.data === 'success') {
                alert("登录成功!");
                closeWindow();
                window.parent.postMessage({ action: 'loginSuccess', username: username }, '*');// 发送消息给父窗口
                localStorage.setItem('username', username); // 设置用户名到localStorage,用来存储用户登录状态
                window.parent.updateUserInfoForParent(username); // 直接调用父页面的更新函数
            } else if (response.data === 'captchaFailed') {
                alert("验证码错误")
            } else if (response.data === 'loginFailed') {
                alert("账号或密码错误")
            }
        }).catch(function (error) {
            // 处理错误
            console.error('Error during login:', error);
            document.getElementById("username_err").style.display = '';
            alert('登录过程中出现了错误，请再试一次!');
        });
    }

    // 接收并监听来自父页面的消息
    window.addEventListener('message', function(event) {
        if (event.data.action === 'registerSuccess') {
            onRegisterSuccess(event.data.username);
        }
    });

    function onRegisterSuccess(username) {
        localStorage.setItem('username', username); // 设置用户名到localStorage,用来存储用户登录状态
        checkLoginStatus(); // 检查登录状态并更新界面
    }
</script>

</body>
</html>